<template>
	<view style="min-height: 100vh;background-color: white;">
		<view class="NavBar" :style="{'paddingTop':topHight+'rpx','height':topHight+130 +'rpx',}">
			<view class="flex isBtn" @click="goBack"
				style="border-radius: 100%;width: 50rpx;height: 50rpx;padding: 0;justify-content: center;">
				<fui-icon name="arrowleft" color="#FFF" :size="30"></fui-icon>
			</view>
			<view class="flex isBtn">
				<fui-icon name="camera" color="#FFF" :size="30"></fui-icon>
				<view class="">
					更换背景图
				</view>
			</view>
		</view>
		<!-- 背景图片 -->
		<view class="backImage">
			<image src="/static/test/userheader.jpg" mode="aspectFill" alt="" />
		</view>

		<view class="msgBox">
			<!-- 修改头像 -->
			<view class="editAvatar">
				<view class="avatarBox">
					<view class="shadow" @click="getImg">
						<view class="">
							<fui-icon name="camera-fill" color="#FFF" :size="40"></fui-icon>
						</view>
						<view class="" style="color: white;font-size: 26rpx;">
							更换头像
						</view>
					</view>
					<image src="/static/test/userheader.jpg" mode="aspectFill" alt="" />
				</view>
			</view>
			<view style="margin-top: 100rpx;">
				<view class="flex msg">
					<view class="flex" style="width: 80%;">
						<view class="keyBox">
							姓名
						</view>
						<view class="valueBox">
							喜闻乐见
						</view>
					</view>
					<view class="" style="width: 10%;text-align: center;">
						<fui-icon name="arrowright" color="#000" fontWeight="500" :size="34"></fui-icon>
					</view>
				</view>

				<view class="flex msg">
					<view class="flex" style="width: 80%;">
						<view class="keyBox">
							简介
						</view>
						<view class="valueBox">
							哈哈哈哈
						</view>
					</view>
					<view class="" style="width: 10%;text-align: center;">
						<fui-icon name="arrowright" color="#000" fontWeight="500" :size="34"></fui-icon>
					</view>
				</view>

				<view class="flex msg">
					<view class="flex" style="width: 80%;">
						<view class="keyBox">
							性别
						</view>
						<view class="valueBox">
							男
						</view>
					</view>
					<view class="" style="width: 10%;text-align: center;">
						<fui-icon name="arrowright" color="#000" fontWeight="500" :size="34"></fui-icon>
					</view>
				</view>

				<view class="flex msg">
					<view class="flex" style="width: 80%;">
						<view class="keyBox">
							生日
						</view>
						<view class="valueBox">
							2000-12-02
						</view>
					</view>
					<view class="" style="width: 10%;text-align: center;">
						<fui-icon name="arrowright" color="#000" fontWeight="500" :size="34"></fui-icon>
					</view>
				</view>

				<view class="flex msg">
					<view class="flex" style="width: 80%;">
						<view class="keyBox">
							绽放号
						</view>
						<view class="valueBox">
							1122334455
						</view>
					</view>
					<view class="" style="width: 10%;text-align: center;">
						<fui-icon name="arrowright" color="#000" fontWeight="500" :size="34"></fui-icon>
					</view>
				</view>
				<view class="flex">
					<fui-button class="btn" type="success">确认修改</fui-button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				//上传接口地址
				url: 'https://ffa.firstui.cn/api/example/upload-file',
				//上传状态，用于保存或其他操作时做判断
				status: '',
				//上传的图片地址列表
				urls: [],
				topHight: 0,
			};
		},
		mounted() {
			let app = uni.getSystemInfoSync()
			this.topHight = app.statusBarHeight
			console.log('顶部安全距离', this.topHight) //44
		},
		methods: {
			// 选择图片
			getImg() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (res) => {
						console.log(JSON.stringify(res.tempFilePaths));
						this.upImg(JSON.stringify(res.tempFilePaths)[0])
					}
				});
			},
			// 上传图片
			upImg(img) {
				uni.uploadFile({
					url: 'https://ffa.firstui.cn/api/example/upload-file',
					filePath: img,
					header: {
						'Authorization': uni.getStorageSync('authToken')
					},
					formData: {
						'user': 'test'
					},
					name: 'file',
					success: (uploadFileRes) => {
						let res = JSON.parse(uploadFileRes.data)
					}
				})
			},
			goBack() {
				uni.navigateBack({
					fail() {
						uni.switchTab({
							url: '/pages/index/index'
						});
					},
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.btn {
		margin: 30rpx auto;
		width: 90%;
	}

	.keyBox {
		color: #828282;
		width: 25%;
	}

	.avatarBox {
		top: -95rpx;
		right: calc(50% - 95rpx);
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 190rpx;
		height: 190rpx;
		border-radius: 100%;
		background-color: white;

		image {
			width: 95% !important;
			height: 95% !important;
			border-radius: 100%;
		}
	}

	.shadow {
		z-index: 22;
		flex-direction: column;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 190rpx;
		height: 190rpx;
		border-radius: 100%;
		background-color: rgba(0, 0, 0, 0.3);
		position: absolute;
		top: 0;
		left: 0;
	}

	.valueBox {
		font-weight: 500;
		padding: 0rpx 20rpx;
		width: 75%;
	}

	.msg {
		justify-content: space-between;
		padding: 30rpx;
	}

	.msgBox {
		padding: 20rpx 0rpx;
		position: relative;
		top: -40rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		background-color: white;
	}

	.isBtn {
		padding: 10rpx 30rpx;
		// background: rgba(0, 0, 0, 0.5);
		color: #FFF;
		border-radius: 30rpx;
		font-size: 24rpx;
		text-align: center;
		margin-right: 20rpx;
	}

	.NavBar {
		padding: 5rpx 20rpx;
		z-index: 22;
		width: 100%;
		position: fixed;
		display: flex;
		align-items: flex-end;
	}

	.backImage {
		width: 100%;

		image {
			width: 100%;
		}
	}
</style>